<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/pintuer.css">
    <link rel="stylesheet" href="css/admin.css">
    <script src="js/jquery.js"></script>
    <script src="js/pintuer.js"></script>
    <script src="js/commons1.js"></script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong><span class="icon-key"></span> 修改角色</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="">

            <div class="form-group">
                <div class="label">
                    <label>角色名称</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" id="roleName" name="roleName" size="50"/>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>角色描述</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" id="roleDes" name="roleDes" size="100"/>
                </div>
            </div>

            <div class="form-group">
                <div  class="field" id="permContainer">
                    <label>可选权限：</label>
                </div>

            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <input id="submit" class="button bg-main icon-check-square-o" type="button" value="提交">
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function appendData(permList){
        $.each(permList, function (index, perm){
            var data = " <input type=\"checkbox\" name=\"permName\" value='"+perm.perId+"'>" + perm.perName;
            $("#permContainer").append(data)
        })
    }

    function getPermIds() {
        var permIds = [];
        var i = 0;
        let cbs = $("#permContainer :checkbox");
        $.each(cbs, function (index,cb){
            if(cb.checked){
                permIds[i++] = cb.value;
            }
        })
        return permIds;
    }

    $(function (){
        $.get(
            "/RolePermission/listPer",
            function (resp){
                var permList = resp.t;
                appendData(permList);
            },
            "json"
        );

        $("#submit").click(function () {
            var data = {"roleName":$("#roleName").val(),"roleDescription":$("#roleDes").val(),
                "permIds":getPermIds()
            }
            $.ajax({
                "url":"/RolePermission/addRole",
                "type":"POST",
                "data":JSON.stringify(data),
                "dataType":"json",
                "contentType":"application/json; charset=utf-8",
                "success":function (resp){
                    if(resp.code==0){
                        location.href="/html/roleList.html"
                    }else{
                        alert(resp.msg)
                    }
                }
            });
        })
    })
</script>

</body>
</html>